<template>
    <section>
        <a-modal v-model="registerModalShow" :width="700" :footer="null" @cancel="registerModalCancel" class="register-modal" ref="swiperRegister" :zIndex="zIndex">
           <div class="clearfix">
               <div class="left left-box">
                   <article>
                       <div class="swiper-container swiper-container-register">
                           <div class="swiper-wrapper">
                               <div class="swiper-slide">
                                   <h2>华美优胜用户注册</h2>
                                   <a-form layout="horizontal" :form="form" @submit="continueRegister">
                                       <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" hasFeedback>
                                           <a-input type="text" placeholder='请输入姓名'
                                                    v-decorator="['name', {rules: [
                                                         { required: true, message: '请输入姓名', trigger: 'blur' }
                                                    ]}]">
                                               <i slot="prefix" class="iconfont icon-gerenjibenxinxi" style="color:rgba(0,0,0,.25)"></i>
                                           </a-input>
                                       </a-form-item>
                                       <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" hasFeedback>
                                           <a-input type="number" placeholder='请输入手机号码'
                                                    v-decorator="['phone', {rules: [
                                                        {required: true, validator: this.phone_validation, trigger: 'blur' },
                                                    ]}]">
                                               <i slot="prefix" class="iconfont icon-dianhua" style="color:rgba(0,0,0,.25)"></i>
                                           </a-input>
                                       </a-form-item>
                                       <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" hasFeedback>
                                           <a-input-search placeholder='短信验证码' type="number" @search="sendCode"
                                                           v-decorator="['code', {rules: [
                                                                { required: true, validator: this.code_validation, trigger: 'blur' },
                                                            ]}]">
                                               <i slot="prefix" class="iconfont icon-icon_sms" style="color:rgba(0,0,0,.25)"></i>
                                               <a-button type="primary" slot="enterButton" :disabled="codeDisabled">{{ codeText }}</a-button>
                                           </a-input-search>
                                       </a-form-item>
                                       <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" hasFeedback>
                                           <a-input type="email" placeholder='请输入邮箱'
                                                    v-decorator="['email', {rules: [
                                                        {required: true, validator: this.email_validation, trigger: 'blur' },
                                                    ]}]">
                                               <i slot="prefix" class="iconfont icon-dkw_youxiang" style="color:rgba(0,0,0,.25)"></i>
                                           </a-input>
                                       </a-form-item>
                                       <p class="agreenXieyi">注册即表示您同意<router-link to="/PrivacyAgreement" >《华美优胜用户服务协议》</router-link></p>
                                       <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 24 }" >
                                           <a-button htmlType="submit" type="primary" size="large" :loading="submitRegisterLoading" class="RegisterBtn">
                                               <i class="iconfont icon-zhuce1"></i> 注册
                                           </a-button>
                                       </a-form-item>
                                   </a-form>
                                   <div class="footer">
                                       <p>已有账号？
                                           <a @click="cellLoginFather">点此登录</a>
                                       </p>
                                   </div>
                               </div>
                               <div class="swiper-slide goCompletePreferences-box">
                                   <h5>注册成功</h5>
                                   <h5>请您继续完善购房意向，以便华美优胜顾问团队为您提供更完善的投资服务！</h5>
                                   <aside>
                                       <a-button @click="registerModalCancel"><a-icon type="check-circle-o" /> 注册完成</a-button>
                                       <a-button type="primary" @click="goCompletePreferences"><i class="iconfont icon-lishiyixiang_huaban"></i> 完善购房意向</a-button>
                                   </aside>
                                   <p>全国客服热线：400-600-4982</p>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="tendencyCity">
                                           <a-checkbox value="旧金山">旧金山</a-checkbox>
                                           <a-checkbox value="洛杉矶">洛杉矶</a-checkbox>
                                           <a-checkbox value="纽约">纽约</a-checkbox>
                                           <a-checkbox value="西雅图">西雅图</a-checkbox>
                                           <a-checkbox value="亚特兰大">亚特兰大</a-checkbox>
                                           <a-checkbox value="波士顿">波士顿</a-checkbox>
                                           <a-checkbox value="新泽西">新泽西</a-checkbox>
                                           <a-checkbox value="休斯顿">休斯顿</a-checkbox>
                                           <a-checkbox value="圣地亚哥">圣地亚哥</a-checkbox>
                                           <a-checkbox value="奥兰多">奥兰多</a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="cityDisabled" @click.stop="slideNext(2)">
                                               下一步 <a-icon type="arrow-right" />
                                           </a-button>
                                       </aside>
                                       <h6 class="next-step" @click.stop="slideNext(2)">跳过</h6>
                                   </article>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="tendencyHouseType">
                                           <a-checkbox value="独栋别墅">独栋别墅</a-checkbox>
                                           <a-checkbox value="联排别墅">联排别墅</a-checkbox>
                                           <a-checkbox value="公寓">公寓</a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button type="primary" class="prev-step" @click.stop="prevStepFN">
                                               <a-icon type="arrow-left" /> 上一步
                                           </a-button>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="typeDisabled" @click.stop="slideNext(3)">
                                               下一步 <a-icon type="arrow-right" />
                                           </a-button>
                                       </aside>
                                       <h6 class="next-step" @click.stop="slideNext(3)">跳过</h6>
                                   </article>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="investmentObjective">
                                           <a-checkbox value="长期持有">长期持有</a-checkbox>
                                           <a-checkbox value="自住">自住</a-checkbox>
                                           <a-checkbox value="增值投资">增值投资</a-checkbox>
                                           <a-checkbox value="租金收益">租金收益</a-checkbox>
                                           <a-checkbox value="儿女留学居住">儿女留学居住</a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button type="primary" class="prev-step" @click.stop="prevStepFN">
                                               <a-icon type="arrow-left" /> 上一步
                                           </a-button>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="investmentDisabled" @click.stop="slideNext(4)">
                                               下一步 <a-icon type="arrow-right" />
                                           </a-button>
                                       </aside>
                                       <h6 class="next-step" @click.stop="slideNext(4)">跳过</h6>
                                   </article>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="tendencyPrice">
                                           <a-checkbox value="100万人民币以内">100万人民币以内</a-checkbox>
                                           <a-checkbox value="100-200万人民币">100-200万人民币</a-checkbox>
                                           <a-checkbox value="200-400万人民币">200-400万人民币</a-checkbox>
                                           <a-checkbox value="400-700万人民币">400-700万人民币</a-checkbox>
                                           <a-checkbox value="700-1000万人民币">700-1000万人民币</a-checkbox>
                                           <a-checkbox value="1000万人民币以上">1000万人民币以上</a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button type="primary" class="prev-step" @click.stop="prevStepFN">
                                               <a-icon type="arrow-left" /> 上一步
                                           </a-button>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="intentionPriceDisabled" @click.stop="slideNext(5)">
                                               下一步 <a-icon type="arrow-right" />
                                           </a-button>
                                       </aside>
                                       <h6 class="next-step" @click.stop="slideNext(5)">跳过</h6>
                                   </article>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="tendencySize">
                                           <a-checkbox value="100平米以内">100平米以内</a-checkbox>
                                           <a-checkbox value="150平米以内">150平米以内</a-checkbox>
                                           <a-checkbox value="200平米以内">200平米以内</a-checkbox>
                                           <a-checkbox value="250平米以内">250平米以内</a-checkbox>
                                           <a-checkbox value="300平米以内">300平米以内</a-checkbox>
                                           <a-checkbox value="400平米以内">400平米以内</a-checkbox>
                                           <a-checkbox value="500平米以内">500平米以内</a-checkbox>
                                           <a-checkbox value="500平米以上">500平米以上</a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button type="primary" class="prev-step" @click.stop="prevStepFN">
                                               <a-icon type="arrow-left" /> 上一步
                                           </a-button>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="areaDisabled" @click.stop="slideNext(6)">
                                               下一步 <a-icon type="arrow-right" />
                                           </a-button>
                                       </aside>
                                       <h6 class="next-step" @click.stop="slideNext(6)">跳过</h6>
                                   </article>
                               </div>
                               <div class="swiper-slide">
                                   <article class="find-house-preferences">
                                       <a-checkbox-group v-model="tendencyGreatSchool" class="checkBox-greatSchool">
                                           <a-checkbox value="1~5" class="Not-ideal">不理想：<i>1</i> ~ <i>5</i></a-checkbox>
                                           <a-checkbox value="6~7" class="Not-ideal">合格：<i>6</i> ~ <i>7</i></a-checkbox>
                                           <a-checkbox value="8~10" class="Not-ideal">优秀：<i>8</i> ~ <i>10</i></a-checkbox>
                                       </a-checkbox-group>
                                       <aside>
                                           <a-button type="primary" class="prev-step" @click.stop="prevStepFN">
                                               <a-icon type="arrow-left" /> 上一步
                                           </a-button>
                                           <a-button class="next-step next-step-button" :checkBtnDisabled="checkBtnDisabled" :disabled="greatSchoolDisabled" @click.stop="submitRegister" :loading="submitPreferencesLoading">
                                               <i class="iconfont icon-submit"></i> 确认提交
                                           </a-button>
                                       </aside>
                                   </article>
                               </div>
                           </div>
                       </div>
                       <div class="step-box" v-show="stepShow">
                           <h4>选房偏好</h4>
                           <a-steps :current="setpActive" size="small" >
                               <a-step title="意向城市">
                                   <i class="iconfont icon-chengshijianzhu" slot="icon"></i>
                               </a-step>
                               <a-step title="房屋类型">
                                   <i class="iconfont icon-dudongbieshu" slot="icon"></i>
                               </a-step>
                               <a-step title="投资偏好">
                                   <i class="iconfont icon-fangdai1" slot="icon"></i>
                               </a-step>
                               <a-step title="购房预算">
                                   <i class="iconfont icon-dkw_daikuan-" slot="icon"></i>
                               </a-step>
                               <a-step title="面积倾向">
                                   <i class="iconfont icon-fangwumianji" slot="icon"></i>
                               </a-step>
                               <a-step title="学区评分">
                                   <i class="iconfont icon-zaixianxuexi" slot="icon"></i>
                               </a-step>
                           </a-steps>
                       </div>
                   </article>
               </div>
               <div class="left right-box">
                   <ul>
                       <li>
                           <p>
                               <span>
                                   <img src="/static/img/HMYS-dingyuehao.jpg" alt="">
                               </span>
                           </p>
                           <p>华美优胜官方订阅号</p>
                       </li>
                       <li>
                           <p>
                               <span>
                                   <img src="/static/img/HMYS-fuwuhao.jpg" alt="">
                               </span>
                           </p>
                           <p>华美优胜官方服务号</p>
                       </li>
                       <li>
                           <h3>关注华美优胜官方微信公众号获取更多海外热点资讯</h3>
                       </li>
                   </ul>
               </div>
           </div>
        </a-modal>
    </section>
</template>

<script>
    let phoneReg = /^(1)[3|4|5|6|7|8|9](\d){9}$/;

    export default {
        data() {
            return {
                zIndex: 2222222222,//zIndex是10位数，因为美恰的广告弹窗的zIndex是2147483647
                registerModalShow: false,//公共注册modal框是否显示隐藏

                setpActive: 0, //选房偏好步骤条当前index
                form: this.$form.createForm(this),
                submitRegisterLoading: false,//提交注册的加载loading

                tendencyCity: [], //意向城市
                tendencyHouseType: [], //房屋类型
                investmentObjective: [], // 投资偏好
                tendencyPrice: [], // 购房预算
                tendencySize: [], // 面积倾向
                tendencyGreatSchool: [], // 学区评分
                cityDisabled: true, //判断意向城市下一步按钮状态
                typeDisabled: true, //判断房屋类型下一步按钮状态
                investmentDisabled: true, //判断投资偏好下一步按钮状态
                intentionPriceDisabled: true, //判断购房预算下一步按钮状态
                areaDisabled: true, //判断面积倾向下一步按钮状态
                greatSchoolDisabled: true, //判断学区评分的确认提交按钮状态
                verificationCode: '', //验证码的验证串
                codeTime: 0, //获取验证码倒计时
                codeText: '获取验证码', //获取验证码按钮的提示文本
                codeDisabled: false, //获取验证码按钮的状态
                stepShow: false, //显示隐藏步骤条
                registerSwiper: null,//注册框的swiper配置
                submitPreferencesLoading: false,//提交选房偏好button的loading状态

            }
        },
        computed: {
            //判断选房偏好每个下一步按钮的状态
            checkBtnDisabled() {
                // 判断意向城市下一步按钮状态
                if (this.tendencyCity.length > 0) {
                    this.cityDisabled = false
                } else {
                    this.cityDisabled = true
                }
                // 判断房屋类型下一步按钮状态
                if (this.tendencyHouseType.length > 0) {
                    this.typeDisabled = false
                } else {
                    this.typeDisabled = true
                }
                // 判断投资偏好下一步按钮状态
                if (this.investmentObjective.length > 0) {
                    this.investmentDisabled = false
                } else {
                    this.investmentDisabled = true
                }
                // 判断购房预算下一步按钮状态
                if (this.tendencyPrice.length > 0) {
                    this.intentionPriceDisabled = false
                } else {
                    this.intentionPriceDisabled = true
                }
                // 判断面积倾向下一步按钮状态
                if (this.tendencySize.length > 0) {
                    this.areaDisabled = false
                } else {
                    this.areaDisabled = true
                }
                // 判断学区评分的确认提交按钮状态
                if (this.tendencyGreatSchool.length > 0) {
                    this.greatSchoolDisabled = false
                } else {
                    this.greatSchoolDisabled = true
                }
            }
        },
        mounted() {
            // 防刷新：检测是否存在倒计时计算localStorage.codeTime
            this.isCodeTime();

            //监测父组件公共组件header传过来的登录框状态
            this.$on('handleRegisterModal', () => {
                this.registerModalShow = true;
                //延迟1秒后再初始化swiper，防止获取不到.swiper-container-register的DOM标签而初始化失败
                this.$nextTick(() => {
                    //注册框的swiper配置
                    this.registerSwiper = new Swiper('.swiper-container-register', {
                        noSwiping: true, //禁止鼠标拖动
                        noSwipingClass: 'swiper-slide',
                        navigation: {
                            prevEl: '.prev-step',
                            nextEl: '.next-step'
                        },
                        observer: true,//启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
                        observeParents: true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
                    });
                });
            });

        },
        methods: {
            // 防刷新：检测是否存在倒计时计算localStorage.codeTime
            isCodeTime() {
                if (localStorage.codeTime) {
                    this.codeTime = parseInt(localStorage.codeTime);
                    this.codeText = this.codeTime + 's后重新获取';
                    this.codeDisabled = true;
                    let resend = setInterval(function () {
                        this.codeTime--;
                        if (this.codeTime > 0) {
                            this.codeText = this.codeTime + 's后重新获取';
                            localStorage.codeTime = this.codeTime;
                        } else {
                            localStorage.removeItem('codeTime');
                            clearInterval(resend);
                            this.codeText = '获取验证码';
                            this.codeDisabled = false;
                        }
                    }, 1000)
                }
            },
            //验证码倒计时计算
            codeCountdown() {
                if (this.codeTime > 0) {
                    this.codeTime--;
                    this.codeText = this.codeTime + 's后重新获取';
                    setTimeout(this.codeCountdown, 1000);
                    localStorage.codeTime = this.codeTime;
                } else {
                    this.codeTime = 0;
                    this.codeText = '获取验证码';
                    this.codeDisabled = false;
                    localStorage.removeItem('codeTime')
                }
            },
            //发送验证码
            sendCode() {
                let phone = this.form.getFieldValue('phone');
                // 手机号正则验证
                if (phoneReg.test(phone)) {
                    // 手机号符合验证
                    this.$get('/sms/register/' + phone).then(res => {
                        if (res.status == 0) {
                            this.codeTime = 60;
                            this.codeDisabled = true;
                            this.codeCountdown();
                            this.verificationCode = res.data;
                            this.$message.success( '发送成功，请您耐心等待短信通知。' )
                        } else {
                            this.$message.warning(res.msg);
                        }
                    })
                } else {
                    this.$message.error('手机号格式错误。')
                }
            },
            // 点击注册按钮
            continueRegister(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.submitRegisterLoading = true;
                        this.$post('/signUp', {
                            name: values.name, //客户姓名
                            phone: values.phone, //客户电话
                            email: values.email, //客户邮箱
                            msg: values.code, //验证码
                            msgId: this.verificationCode,
                        }).then(res => {
                            this.submitRegisterLoading = false;
                            if (res.status == 0) {
                                this.$notification['success']({
                                    message: '华美优胜提示您：',
                                    description: '注册成功，请您继续完善购房意向！'
                                });
                                this.registerSwiper.slideNext(500);

                                //设置全局使用————登录用户的个人信息
                                this.$store.commit('set_user', {
                                    name: res.data.name,
                                    headPhoto: res.data.photo,
                                });
                                this.setLocalStorage('userName', res.data.name);
                                this.setLocalStorage('userHeadPhoto', res.data.photo);
                            } else {
                                this.$message.warning(res.msg);
                            }
                        })
                    }else{
                        this.$message.error('表单项输入有误，请检查并重新输入！');
                    }
                });
            },
            //注册完成后，点击继续完善购房意向
            goCompletePreferences(){
                this.registerSwiper.slideNext(500);
                this.stepShow = true;
            },
            //步骤条点击上一步
            prevStepFN() {
                this.setpActive = this.setpActive - 1
            },
            //步骤条点击下一步
            slideNext(index) {
                this.setpActive = index - 1
            },
            //提交投资偏好信息
            submitRegister() {
                this.submitPreferencesLoading = true;
                this.$post('/user/invest/update', {
                    tendencySite: this.tendencyCity.join(), //选取的意向城市
                    tendencyRoom: this.tendencyHouseType.join(), //选取的房源类型
                    investmentObjective: this.investmentObjective.join(), //选取的投资偏好
                    tendencyPrice: this.tendencyPrice.join(), //选取的购房预算
                    tendencySize: this.tendencySize.join(), //选取的面积倾向
                    tendencySchool: this.tendencyGreatSchool.join() //选取的学区评分
                }).then(res => {
                    this.submitPreferencesLoading = false;
                    if (res.status == 0) {
                        this.$notification['success']({
                            message: '华美优胜提示您：',
                            description: '购房意向已完善，华美优胜顾问团队将及时与您取得联系并提供专业的购房服务！'
                        });
                        setTimeout(() =>{
                            window.location.reload();
                        },3000)
                    } else {
                        this.$message.warning(res.msg);
                    }
                })
            },
            //公共注册modal框关闭时触发
            registerModalCancel(){
                this.registerModalShow = false;
            },
            // 子组件中触发父组件方法cellLoginSon，以调用登录modal框
            cellLoginFather(){
                this.$emit('cellLoginSon');
                this.registerModalShow = false;
            },
        }

    }
</script>

<style lang="less" type="text/less">
    body {
        .register-modal {
            top: 80px;
            .ant-modal-body {
                padding: 0px !important;
                >div{
                    min-height: 450px;
                    >.left-box {
                        box-sizing: border-box;
                        padding: 0px 20px;
                        width: 70%;
                        h2{
                            text-align: center;
                            font-size: 22px;
                            line-height: 34px;
                            padding: 0px 0px 15px;
                        }
                        > article {
                            position: relative;
                            padding-top: 20px;
                            > .swiper-container {
                                > .swiper-wrapper {
                                    > .swiper-slide {
                                        > form {
                                            .ant-form-item{
                                                margin-bottom: 20px;
                                                .ant-input,
                                                .ant-input-search-button{
                                                    height: 40px;
                                                    line-height: 40px;
                                                }
                                                .RegisterBtn{
                                                    width: 100% !important;
                                                }
                                            }
                                            p {
                                                font-size: 14px;
                                                color: #fff;
                                                text-align: center;
                                                > a {
                                                    color: #27aee5;
                                                    font-weight: bold;
                                                }
                                            }
                                        }
                                        .agreenXieyi{
                                            position: relative;
                                            top:-10px;
                                            font-size: 14px;
                                            line-height: 32px;
                                            color: #000;
                                            text-align: left;
                                            >a{
                                                color: #4182e4;
                                            }
                                        }
                                        .footer {
                                            > p {
                                                padding-right: 20px;
                                                text-align: right;
                                                > a {
                                                    color: #27aee5;
                                                    font-weight: bold;
                                                }
                                            }
                                        }
                                        .find-house-preferences {
                                            margin: 120px 0 0 0;
                                            >.ant-checkbox-group{
                                                width: 100%;
                                                >label {
                                                    float: left;
                                                    width: 33.3%;
                                                    margin: 10px 0 0 0;
                                                    text-align: left;
                                                }
                                            }
                                            /*学区评分*/
                                            .checkBox-greatSchool {
                                                > label {
                                                    > i {
                                                        display: inline-block;
                                                        width: 22px;
                                                        height: 22px;
                                                        line-height: 22px;
                                                        text-align: center;
                                                        font-size: 12px;
                                                        color: #fff;
                                                        border-radius: 50%;
                                                    }
                                                }
                                                label.Not-ideal {
                                                    > i {
                                                        background: #f75355;
                                                    }
                                                }
                                                label.qualified {
                                                    > i {
                                                        background: #fbaa60;
                                                    }
                                                }
                                                label.good {
                                                    > i {
                                                        background: #83bb71;
                                                    }
                                                }
                                            }
                                            > aside {
                                                text-align: center;
                                                > button {
                                                    margin: 15px;
                                                }
                                                >button.next-step-button{
                                                    color: #fff;
                                                    background-color: #19be6b;
                                                    border-color: #19be6b;
                                                }
                                                >button.next-step-button:hover {
                                                    background-color: #47cb89;
                                                    border-color: #47cb89;
                                                }
                                                >button.next-step-button[disabled]{
                                                    color: rgba(0, 0, 0, 0.25);
                                                    background-color: #f5f5f5;
                                                    border-color: #d9d9d9;
                                                }
                                            }
                                            > h6 {
                                                text-align: center;
                                                font-weight: bold;
                                                margin: 20px 0 0 0;
                                                font-size: 12px;
                                                color: #999;
                                                cursor: pointer;
                                            }
                                        }
                                    }
                                    >.goCompletePreferences-box{
                                        width: 450px;
                                        padding: 50px 0;
                                        text-align: center;
                                        >h5{
                                            margin: 30px 0;
                                        }
                                        >h5:first-of-type{
                                            margin: 0 0 30px 0;
                                        }
                                        >aside{
                                            text-align: center;
                                            >button{
                                                display: block;
                                                margin: 10px auto;
                                            }
                                        }
                                        >p{
                                            font-size: 16px;
                                            margin: 30px 0 0 0;
                                        }
                                    }
                                }
                            }
                            > .step-box {
                                position: absolute;
                                top: 0;
                                left: 0px;
                                z-index: 9999;
                                width: 100%;
                                > h4 {
                                    text-align: center;
                                    font-weight: 400;
                                    padding: 20px 0;
                                }
                            }
                        }
                    }
                    >.right-box{
                        width: 30%;
                        height: 100%;
                        padding: 20px 0;
                        box-sizing: border-box;
                        background: url("/static/img/login-register-rightbox-bg.jpg") no-repeat center center;
                        background-size: cover;
                        min-height: 520px;
                        >ul{
                            >li{
                                >p{
                                    text-align: center;
                                    color: #fff;
                                    line-height: 38px;
                                    >span{
                                        display: inline-block;
                                        background: #fff;
                                        padding: 10px;
                                        >img{
                                            width: 140px;
                                        }
                                    }

                                }
                            }
                            >li:last-of-type{
                                padding: 0 15px;
                                >h3{
                                    background: #ee5e55;
                                    border-radius: 5px;
                                    font-size: 13px;
                                    color: #fff;
                                    padding: 5px;
                                    text-align: center;
                                    z-index: 2;
                                }
                            }
                        }
                    }
                }
            }
            .ant-modal-close{
                border-radius: 50%;
                width: 40px;
                height: 40px;
                top: -20px;
                right: -20px;
                background: #fefefe;
                >.ant-modal-close-x{
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                }
            }
            .ant-form-item{
                margin-bottom: 20px;
            }
            .ant-steps-small .ant-steps-item-icon{
                margin: 0 !important;
            }
        }
    }
</style>
